<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>L.F.C系统设计小组</title>
    <link rel="stylesheet" href="./bootstrap5/css/bootstrap.css">
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/DPlayer.min.css">
    <style>
        .navbar-nav a {
            color: inherit;
        }

        .z-select {
            background: transparent url("images/sanj.png") no-repeat 4px center;
        }

        .z-none-select {
            color: #aaa;
        }

        .box {
            width: 700px;
            height: 700px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: url('http://k21vin.gitee.io/front-end-data-visualization/assets/bg01.13dfb262.jpg');
            background-size: 100%;
            background-position: center;
        }

        .frosted__glass {
            filter: blur(1px);
            opacity: 0.7;
        }

        /*视频播放器样式*/
        .film_focus .film_focus_imgs_wrap {
            width: 100%;
            height: 349px;
            background: url(images/T16WJqXaXeXXXXXXXX-32-32.gif) no-repeat center center;
        }

        .film_focus ul.film_focus_imgs {
            width: 100%;
            height: 9999em;
            position: absolute;
            left: 0;
            top: 0;
        }

        .film_focus {
            width: 100%;
            height: 349px;
            overflow: hidden;
            position: relative;
        }

        .film_focus ul {
            padding: 0px;
            margin: 0px;
            list-style: none;
        }

        ;
        .film_focus ul.film_focus_imgs li {
            height: 349px;
            overflow: hidden;
        }

        .film_focus .film_focus_desc h3 {
            height: 45px;
            line-height: 45px;
            overflow: hidden;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, .5);
            color: #fff;
            width: 100%;
            padding-left: 24px;
            z-index: 99;
            font-size: 16px;
            filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#7F000000', endColorstr='#7F000000');
        }

        .film_focus ul.film_focus_nav {
            width: 15%;
            height: 349px;
            background: #424242;
            position: absolute;
            right: 0px;
            top: 0;
            z-index: 100;
        }

        .film_focus ul.film_focus_nav li {
            height: 85px;
            background: url(images/T1WiB5Xf0EXXXXXXXX-1-75.png) repeat-x;
            margin: 1px 1px 1px 0;
            padding: 5px 0 0 5px;
            position: relative;
        }

        .film_focus ul.film_focus_nav li.cur {
            background: url(images/T19yB9Xm0BXXXXXXXX-296-79.png) no-repeat 0 2px;
            width: 130px;
            left: -19px;
            z-index: 100;
        }

        .film_focus ul.film_focus_nav li img {
            position: absolute;
            left: 5px;
            top: 5px;
        }

        .film_focus ul.film_focus_nav li.cur img {
            left: 19px;
            width: 110px;
            height: 79px;
            margin-top: -1px;
        }

        .film_focus ul.film_focus_nav li h4 {
            color: #fff;
        }

        .film_focus ul.film_focus_nav li p {
            color: #B9B9B9;
            line-height: 1.8em;
        }

        .knowcon_right {
            width: 100%;
            height: 349px;
            border-top: 2px #ff8e3b solid;
            background: #FDFDFD;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
        }

        .pulsing:before, .pulsing:after {
            content: "";
            position: absolute;
        }

        .main-content {
            display: grid;
            width: 100%;
        }

        @media (max-width: 767px) {
            .w-85 {
                width: 100% !important;
            }
        }

        @media (min-width: 768px) {
            .w-85 {
                width: 85% !important;
            }
        }

    </style>
    <script type="text/javascript" src="./bootstrap5/js/bootstrap.js"></script>
    <script type="text/javascript" src="./js/swiper.min.js"></script>
    <script type="text/javascript" src="./js/DPlayer.min.js"></script>
</head>
<body>
<!--导航-->
<div class="container">
    <div class="row">
        <div class="col shadow-sm">
            <nav class="navbar p-1 navbar-expand-lg bg-white ">
                <a class="navbar-brand" href="#">
                    <img src="images/livepool.jpeg" class="img-fluid" style="max-width: 90px;max-height: 90px">
                </a>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link active border-0" aria-current="page" href="#" style=" color:inherit;">T.K.A.S</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="bi bi-database-check">战术装甲</i></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#"><i class="bi bi-database-check">泛用兵器</i></a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                               aria-expanded="false">
                                <i class="bi bi-database-check">水下系统</i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                               aria-expanded="false">
                                <i class="bi bi-database-check">培养方向</i>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="#">Action</a></li>
                                <li><a class="dropdown-item" href="#">Another action</a></li>
                                <li>
                                    <hr class="dropdown-divider">
                                </li>
                                <li><a class="dropdown-item" href="#">Something else here</a></li>
                            </ul>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled ">
                                <small>业精于勤而荒于<i class="mark text-danger">嬉</i></small>
                            </a>
                        </li>
                    </ul>
                    <form class="d-flex" role="search">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </nav>
        </div>
    </div>
</div>
<!--头部-->
<header class="mt-1 d-none d-lg-block"><!--在小屏幕里不显示-->
    <div class="container ">
        <div class="row">
            <div class="col-lg-3">
                <a href=""><img src="images/jF8z4WH3.jpg" style="max-height: 120px;height: 120px"></a>
                <!-- <a href=""><img src="images/timg.jpg" style="max-height: 120px;height: auto"></a>
                 <a href="" class="me-1"><img src="images/bairen.jpeg" style="max-height: 120px;height: 100px"></a>-->
            </div>
            <div class="col-lg-4 pt-3 mt-4 me-5 align-items-center">
                <blockquote class="blockquote text-center">
                    <p style="color: darkred">you will never walk alone</p>
                </blockquote>
            </div>
            <div class="col-lg-3 pt-3  ms-5  mt-4"><!-- Example single danger button -->
                <div class="text-right">
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false">
                            学习园地
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <button type="button" class="btn btn-outline-danger dropdown-toggle" data-bs-toggle="dropdown"
                                aria-expanded="false">
                            智校云
                        </button>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">Separated link</a></li>
                        </ul>
                    </div>

                </div>
            </div>
        </div>
    </div>
</header>

<blockquote class="blockquote mt-4   mb-2 text-center d-lg-none">
    <p style="color: darkred">you will never walk alone</p>
</blockquote><!--只在小屏里显示-->

<!--轮播图-->
<!--移动设备-->
<section class="mt-2 d-lg-none">
    <div class="container">
        <div class="row">
            <div id="carouselExampleCaptions" class="carousel slide">
                <div class="carousel-indicators">
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active"
                            aria-current="true" aria-label="Slide 1"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1"
                            aria-label="Slide 2"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2"
                            aria-label="Slide 3"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3"
                            aria-label="Slide 4"></button>
                    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4"
                            aria-label="Slide 5"></button>
                </div>
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img src="images/player/1.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>First slide label</h5>
                            <p>Some representative placeholder content for the first slide.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="images/player/2.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Second slide label</h5>
                            <p>Some representative placeholder content for the second slide.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="images/player/3.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Third slide label</h5>
                            <p>Some representative placeholder content for the third slide.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="images/player/4.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Third slide label</h5>
                            <p>Some representative placeholder content for the third slide.</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="images/player/5.jpg" class="d-block w-100" alt="...">
                        <div class="carousel-caption d-none d-md-block">
                            <h5>Third slide label</h5>
                            <p>Some representative placeholder content for the third slide.</p>
                        </div>
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
                        data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
                        data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>
        </div>
    </div>
</section>
<!--pc设备-->
<section>
    <div class="container mt-2 d-none d-lg-block">
        <div class="row">
            <div class="col">
                <div class="carousel" id="lunbo_pc">
                    <a class="carousel-item active" href="##" target="_blank"><img src="images/player/1.jpg"
                                                                                   class="d-block w-100"></a>
                    <a class="carousel-item" href="##" target="_blank"><img src="images/player/2.jpg"
                                                                            class="d-block w-100"></a>
                    <a class="carousel-item" href="##" target="_blank"><img src="images/player/3.jpg"
                                                                            class="d-block w-100"></a>
                    <a class="carousel-item" href="##" target="_blank"><img src="images/player/4.jpg"
                                                                            class="d-block w-100"></a>
                    <a class="carousel-item" href="##" target="_blank"><img src="images/player/5.jpg"
                                                                            class="d-block w-100"></a>
                </div>
                <div class="card w-25 shadow ms-auto mt-5 border-0"
                     style="background: rgba(0,0,0,0.4);line-height: 25px;font-size: 15px">
                    <div id="r_list" class="list-group align-items-center">
                        <a class="list-group-item text-truncate bg-transparent text-decoration-none text-white-50"
                           href="###">最牛web全栈开发就业班￥9800</a>
                        <a class="list-group-item text-truncate bg-transparent text-decoration-none text-white-50"
                           href="###">最牛web全栈开发就业班￥9800</a>
                        <a class="list-group-item text-truncate bg-transparent text-decoration-none text-white-50"
                           href="###">最牛web全栈开发就业班￥9800</a>
                        <a class="list-group-item text-truncate bg-transparent text-decoration-none text-white-50"
                           href="###">最牛web全栈开发就业班￥9800</a>
                        <a class="list-group-item text-truncate bg-transparent text-decoration-none text-white-50"
                           href="###">最牛web全栈开发就业班￥9800</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--你的收获-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4>你的收获 &nbsp
                        <small class="text-muted">掌握一门就业的技术，为成长继续力量</small>
                    </h4>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row" id="shouhuo_row">
            <div class="col-lg-2 col-sm-6 col-md-4 p-1  " style="height: 100px;line-height: 120px">
                <div style="background: url('images/h1.jpg')" class="text-center rounded-3">
                    <a class="d-inline-block text-decoration-none text-white" href="###"><h4>实习岗位</h4></a>
                </div>
            </div>
            <div class="col-lg-2 col-sm-6 col-md-4 p-1" style="height: 120px;line-height: 120px">
                <div style="background: url('images/h2.jpg')" class="text-center rounded-3">
                    <a class="d-inline-block text-decoration-none text-white" href="###"><h4>实习岗位</h4></a>
                </div>
            </div>
            <div class="col-lg-2 col-sm-6 col-md-4 p-1" style="height: 120px;line-height: 120px">
                <div style="background: url('images/h3.jpg')" class="text-center rounded-3">
                    <a class="d-inline-block text-decoration-none text-white" href="###"><h4>实习岗位</h4></a>
                </div>
            </div>
            <div class="col-lg-2 col-sm-6 col-md-4 p-1" style="height: 120px;line-height: 120px">
                <div style="background: url('images/h4.jpg')" class="text-center rounded-3">
                    <a class="d-inline-block text-decoration-none text-white" href="###"><h4>实习岗位</h4></a>
                </div>
            </div>
            <div class="col-lg-2 col-sm-6 col-md-4 p-1" style="height: 120px;line-height: 120px">
                <div style="background: url('images/h5.jpg')" class="text-center rounded-3">
                    <a class="d-inline-block text-decoration-none text-white" href="###"><h4>实习岗位</h4></a>
                </div>
            </div>
            <div class="col-lg-2 col-sm-6 col-md-4 p-1" style="height: 120px;line-height: 120px">
                <div style="background: url('images/h6.jpg')" class="text-center rounded-3">
                    <a class="d-inline-block text-decoration-none text-white" href="###"><h4>实习岗位</h4></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!--关注我们-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4>关注我们 &nbsp
                        <small class="text-muted">掌握一门就业的技术，为成长继续力量</small>
                    </h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6 col-sm-12 col-md-6">
                <div class="film_focus">
                    <div class="film_focus_imgs_wrap main-content">
                        <ul class="film_focus_imgs w-85">
                            <li>
                                <div id="dplayer1" style="width: 100%;height: 349px"></div>
                            </li>
                            <li>
                                <div id="dplayer2" style="width: 100%;height: 349px"></div>

                            </li>
                            <li>
                                <div id="dplayer3" style="width: 100%;height: 349px"></div>

                            </li>
                            <li>
                                <div id="dplayer4" style="width: 100%;height: 349px"></div>

                            </li>
                        </ul>
                    </div>


                    <div class="film_focus_desc d-none d-md-block">
                        <h3>Web全栈开发就业班10大核心优势</h3>
                        <ul id="film" class="film_focus_nav">
                            <li class="cur">
                                <img width="100" height="79" src="images/player/t1.png" alt="Web全栈开发就业班10大核心优势"/>
                            </li>
                            <li>
                                <img width="100" height="79" src="images/player/t2.png" alt="融职IT教育首创“坐班”学习模式"/>
                            </li>
                            <li>
                                <img width="100" height="79" src="images/player/t3.png" alt="EduWork只为培养可以交付的程序员"/>

                            </li>
                            <li>
                                <img width="100" height="79" src="images/player/t4.png" alt="浸入【智校云】项目组，在工作中学习"/>

                            </li>


                        </ul>
                    </div>
                </div>

            </div>
            <div class="col-lg-6 col-sm-12 col-md-6">
                <div class="card w-75 border-0 shadow " style="height: 354px">
                    <div class="card-header d-flex  bg-white  border-bottom-0" style="border-top: orange">
                        <h5 class="d-inline-block">最新动态</h5>
                        <small class="ms-1 text-muted mt-1">EduWork</small>
                        <a href="###" class="text-black-50 ms-auto mt-1 text-decoration-none"
                           style="font-size: 14px">更多</a>
                    </div>
                    <ul class="list-group" style="line-height: 30px">
                        <li class="list-group-item py-1 border-0"><a href="###"
                                                                     class="card-link text-decoration-none text-dark text-truncate"><span
                                class="badge bg-warning">1</span> 掌握一门就业的技术，为成长继续力量</a></li>
                        <li class="list-group-item py-1 border-0"><a href="###"
                                                                     class="text-decoration-none text-dark text-truncate"><span
                                class="badge bg-warning">2</span> 掌握一门就业的技术，为成长继续力量</a></li>
                        <li class="list-group-item py-1 border-0"><a href="###"
                                                                     class="text-decoration-none text-dark text-truncate"><span
                                class="badge bg-warning">3</span> 掌握一门就业的技术，为成长继续力量</a></li>
                        <li class="list-group-item py-1 border-0"><a href="###"
                                                                     class="text-decoration-none text-dark text-truncate"><span
                                class="badge bg-dark">4</span> 掌握一门就业的技术，为成长继续力量</a></li>
                        <li class="list-group-item py-1 border-0"><a href="###"
                                                                     class="text-decoration-none text-dark text-truncate"><span
                                class="badge bg-dark">5</span> 掌握一门就业的技术，为成长继续力量</a></li>
                        <li class="list-group-item py-1 border-0"><a href="###"
                                                                     class="text-decoration-none text-dark text-truncate"><span
                                class="badge bg-dark">6</span> 掌握一门就业的技术，为成长继续力量</a></li>
                        <li class="list-group-item py-1 border-0"><a href="###"
                                                                     class="text-decoration-none text-dark text-truncate"><span
                                class="badge bg-dark">7</span> 掌握一门就业的技术，为成长继续力量</a></li>
                        <li class="list-group-item py-1 border-0"><a href="###"
                                                                     class="text-decoration-none text-dark text-truncate"><span
                                class="badge bg-dark">8</span> 掌握一门就业的技术，为成长继续力量</a></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</section>
<!--成长平台-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4>成长平台 &nbsp
                        <small class="text-muted">掌握一门就业的技术，为成长继续力量</small>
                    </h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-1">
                成长平台1
            </div>
            <div class="col-lg-5">
                成长平台2
            </div>
            <div class="col">
                成长平台3
            </div>
        </div>
        <div class="row">
            <div class="col-lg-1">
                成长平台1
            </div>
            <div class="col-lg-2">
                成长平台1
            </div>
            <div class="col-lg-6">
                成长平台2
            </div>
            <div class="col-lg-2">
                成长平台1
            </div>
            <div class="col-lg-1">
                成长平台3
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12">成长平台4</div>
        </div>
    </div>
</section>
<!--培养模式-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4>培养模式 &nbsp
                        <small class="text-muted">掌握一门就业的技术，为成长继续力量</small>
                    </h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-1">
                培养模式1
            </div>
            <div class="col-lg-3">
                培养模式2
            </div>
            <div class="col-lg-4">
                培养模式3
            </div>
            <div class="col-lg-3">
                培养模式3
            </div>
            <div class="col-lg-1">
                培养模式3
            </div>
        </div>

    </div>
</section>
<!--面授培训-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4>面授培训 &nbsp
                        <small class="text-muted">掌握一门就业的技术，为成长继续力量</small>
                    </h4>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-2">aa</div>
            <div class="col-lg-2">aa</div>
            <div class="col-lg-1">aa</div>
            <div class="col-lg-3">aa</div>
            <div class="col-lg-4">aa</div>
        </div>
        <div class="row">
            <div class="col-lg-2">aa</div>
            <div class="col-lg-2">aa</div>
            <div class="col-lg-1">aa</div>
            <div class="col-lg-3">aa</div>
            <div class="col-lg-4">aa</div>
        </div>
        <div class="row">
            <div class="col-lg-2">aa</div>
            <div class="col-lg-2">aa</div>
            <div class="col-lg-1">aa</div>
            <div class="col-lg-3">aa</div>
            <div class="col-lg-4">aa</div>
        </div>
        <div class="row">
            <div class="col-lg-2">aa</div>
            <div class="col-lg-2">aa</div>
            <div class="col-lg-1">aa</div>
            <div class="col-lg-3">aa</div>
            <div class="col-lg-4">aa</div>
        </div>
    </div>

</section>
<!--实习目标-->
<section class="mt-4 bg-light">
    <div class="container">
        <div class="row ">
            <div class="col">
                <div>
                    <h4>实习目标 &nbsp
                        <small class="text-muted">掌握一门就业的技术，为成长继续力量</small>
                    </h4>
                </div>
            </div>
        </div>
        <div class="row ">
            <div class="col-sm-12 col-md-6 col-lg-6 mb-4">
                <div class="d-flex flex-column bg-white shadow">
                    <div class="d-flex flex-row " style="background-color: #0b5ed7">
                        <div class="me-auto pt-2 ps-2 "><h5><a href="#" class="text-white text-decoration-none ">JAVA开发工程师</a>
                        </h5></div>
                        <div class="me-2 pt-2"><a
                                class="text-white text-decoration-none btn  border-white btn-sm    rounded-0"
                                style="background-color: rgba(255,255,255,0.2)" href="">了解更多</a></div>
                        <div class="me-2 pt-2 ps-2"><a
                                class="text-white text-decoration-none btn  btn-sm border-white rounded-0"
                                style="background-color: rgba(255,255,255,0.2)" href="">申请试岗</a></div>
                    </div>
                    <div class="d-flex flex-row ">
                        <div class="flex-fill flex-column text-center">
                            <a href="" class="d-block">
                                <figure class="figure mt-3 text-center">
                                    <img src="images/java_icon.png" class="figure-img " style="max-width: 150px">
                                    <figcaption class="figure-caption" style="color: #2C8DFB">
                                        排行榜第一的语言<br>
                                        重点的招聘方向
                                    </figcaption>
                                </figure>
                            </a>
                            <a href="" class="d-block">
                                <figure class="figure mt-3 text-center ps-2">
                                    <img src="images/jteam.png" class="figure-img " style="max-width: 150px">
                                    <figcaption class="figure-caption" style="color: #2C8DFB">
                                        我的<br>
                                        重点的招聘方向
                                    </figcaption>
                                </figure>
                            </a>
                        </div>
                        <div class="flex-fill flex-column my-3 " style="margin-left: 50px">
                            <div class="media mx-3 my-4 pt-5 ps-3">
                                <div class="media-left">
                                    <img  src="images/javait.png" style="max-width: 64px">
                                </div>
                                <div class="media-body align-self-center pt-3">
                                    <h5 style="color: #2C8DFB">掌握的技术</h5>
                                </div>
                            </div>
                            <div class="media mx-3  pt-5  ps-3">
                                <div class="media-left">
                                    <img  src="images/javait.png" style="max-width: 64px">
                                </div>
                                <div class="media-body align-self-center pt-3">
                                    <h5 style="color: #2C8DFB">掌握的技术</h5>
                                </div>
                            </div>
                            <div class="media mx-3 my-4 pt-5  ps-3">
                                <div class="media-left">
                                    <img  src="images/javait.png" style="max-width: 64px">
                                </div>
                                <div class="media-body align-self-center pt-3">
                                    <h5 style="color: #2C8DFB">掌握的技术</h5>
                                </div>
                            </div>

                        </div>

                    </div>
                    <div class="card-footer bg-white p-2"><img src="images/java.jpg" class="img-fluid"></div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-6 mb-4">aa</div>
        </div>
        <div class="row ">
            <div class="col-sm-12 col-md-6 col-lg-6">aa</div>
            <div class="col-sm-12 col-md-6 col-lg-6">aa</div>
        </div>

    </div>
</section>
<!--你的总监-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4>你的总监 &nbsp
                        <small class="text-muted">掌握一门就业的技术，为成长继续力量</small>
                    </h4>
                </div>
            </div>
        </div>
        <div class="row d-none d-lg-block">
            <div class="col">
                <div class="card w-100 text-white border-0 rounded-3" style="margin-top: 200px">
                    <img src="images/cwbg.png" class="card-img shadow-lg">
                    <div class="card-img-overlay d-flex flex-row">
                        <div class="w-25" style="margin-top: -206px">
                            <img id="teacher-c-pic" class="img-fluid" src="images/phpjs4c.png">
                        </div>
                        <div class="w-75" style="margin-top: 30px">
                            <div id="teacher-c-title" class="card-title"><h4>黄芪发</h4></div>
                            <div id="teacher-c-sub" class="card-subtitle mt-1"><h6>lalalaalaladasdsadasdadasa</h6></div>
                            <div id="teacher-c-text" class="card-text">首先boot4 中 隐藏和显示 元素是 d-none / d-block 根据不同尺寸 可以设置
                                d-sm-none
                                在小屏幕及以上屏幕都隐藏 d-md-none
                                在中屏幕和大屏幕上都隐藏 d-lg-none 只在大屏幕的时候隐..
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row mt-5">
            <div data-ti="1" class="teacher col-lg-3 col-sm-6 col-md-3 text-center">
                <div class="card mt-4">
                    <div class="card-img">
                        <img src="images/eduglf.jpg" class="img-fluid">
                    </div>
                    <div class="card-body " style="font-size: 14px">
                        . 在不同尺寸下显示 规格描述 d-sm-block 在小屏幕及以上屏幕显示当前标签
                        d-md-block 在中
                    </div>
                    <div class="card-footer"><strong>aaa</strong></div>
                </div>
            </div>
            <div data-ti="2" class="teacher col-lg-3 col-sm-6 col-md-3 text-center">
                <div class="card mt-4">
                    <div class="card-img">
                        <img src="images/eduglf.jpg" class="img-fluid">
                    </div>
                    <div class="card-body " style="font-size: 14px">
                        . 在不同尺寸下显示 规格描述 d-sm-block 在小屏幕及以上屏幕显示当前标签
                        d-md-block 在中
                    </div>
                    <div class="card-footer"><strong>aaa</strong></div>
                </div>
            </div>
            <div data-ti="3" class="teacher col-lg-3 col-sm-6 col-md-3 text-center">
                <div class="card mt-4">
                    <div class="card-img">
                        <img src="images/eduzs.jpg" class="img-fluid">
                    </div>
                    <div class="card-body " style="font-size: 14px">
                        . 在不同尺寸下显示 规格描述 d-sm-block 在小屏幕及以上屏幕显示当前标签
                        d-md-block 在中
                    </div>
                    <div class="card-footer"><strong>aaa</strong></div>
                </div>
            </div>
            <div data-ti="4" class="teacher col-lg-3 col-sm-6 col-md-3 text-center">
                <div class="card mt-4">
                    <div class="card-img">
                        <img src="images/eduzs.jpg" class="img-fluid">
                    </div>
                    <div class="card-body " style="font-size: 14px">
                        . 在不同尺寸下显示 规格描述 d-sm-block 在小屏幕及以上屏幕显示当前标签
                        d-md-block 在中
                    </div>
                    <div class="card-footer"><strong>aaa</strong></div>
                </div>
            </div>


        </div>
    </div>
</section>
<!--对标陪训-->
<section class="mt-4">
    <div class="container" id="pk">
        <div class="row">
            <div class="col">
                <div>
                    <h4>对标陪训 &nbsp
                        <small class="text-muted">掌握一门就业的技术，为成长继续力量</small>
                    </h4>
                </div>
            </div>
        </div>
        <div class="row mt-2" id="pk-title">
            <div class="col-lg-5 mt-4 ">
                <div class=" pr-3  py-2 h4 bg-light rounded-2 pull-right ">新版 实习模式</div>
            </div>
            <div class="col-lg-2">
                <div class="h1 text-center bg-light shadow rounded-2">
                    <b class="text-danger">P</b> <b class="text-dark">K</b>
                </div>
            </div>
            <div class="col-lg-5 mt-4 ">
                <div class=" pr-3  py-2 h4 bg-light rounded-2 pull-left ">传统 培训模式</div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-5 ">
                <div class="bg-light w-100 progress mt-3" style="height: 30px">
                    <div class="progress-bar bg-light text-right text-danger pr-3" style="width: 40%">60</div>
                    <div class="progress-bar progress-bar-striped  progress-bar-animated bg-danger text-white pr-3"
                         style="width: 60%">提高简历真实的情况
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="h4 p-2 text-center bg-light shadow-sm rounded-bg">求职就业</div>
            </div>
            <div class="col-lg-5  ">
                <div class="bg-light w-100 progress mt-3" style="height: 30px">
                    <div class="progress-bar   bg-dark text-white pr-3" style="width: 40%">传统包装简历</div>
                    <div class="progress-bar bg-light text-right text-dark pr-3" style="width: 60%">40</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-5 ">
                <div class="bg-light w-100 progress mt-3" style="height: 30px">
                    <div class="progress-bar bg-light text-right text-danger pr-3" style="width: 40%">60</div>
                    <div class="progress-bar progress-bar-striped  progress-bar-animated bg-danger text-white pr-3"
                         style="width: 60%">提高简历真实的情况
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="h4 p-2 text-center bg-light shadow-sm rounded-bg">求职就业</div>
            </div>
            <div class="col-lg-5  ">
                <div class="bg-light w-100 progress mt-3" style="height: 30px">
                    <div class="progress-bar   bg-dark text-white pr-3" style="width: 40%">传统包装简历</div>
                    <div class="progress-bar bg-light text-right text-dark pr-3" style="width: 60%">40</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-5 ">
                <div class="bg-light w-100 progress mt-3" style="height: 30px">
                    <div class="progress-bar bg-light text-right text-danger pr-3" style="width: 40%">60</div>
                    <div class="progress-bar progress-bar-striped  progress-bar-animated bg-danger text-white pr-3"
                         style="width: 60%">提高简历真实的情况
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="h4 p-2 text-center bg-light shadow-sm rounded-bg">求职就业</div>
            </div>
            <div class="col-lg-5  ">
                <div class="bg-light w-100 progress mt-3" style="height: 30px">
                    <div class="progress-bar   bg-dark text-white pr-3" style="width: 40%">传统包装简历</div>
                    <div class="progress-bar bg-light text-right text-dark pr-3" style="width: 60%">40</div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-5 ">
                <div class="bg-light w-100 progress mt-3" style="height: 30px">
                    <div class="progress-bar bg-light text-right text-danger pr-3" style="width: 40%">60</div>
                    <div class="progress-bar progress-bar-striped  progress-bar-animated bg-danger text-white pr-3"
                         style="width: 60%">提高简历真实的情况
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="h4 p-2 text-center bg-light shadow-sm rounded-bg">求职就业</div>
            </div>
            <div class="col-lg-5  ">
                <div class="bg-light w-100 progress mt-3" style="height: 30px">
                    <div class="progress-bar   bg-dark text-white pr-3" style="width: 40%">传统包装简历</div>
                    <div class="progress-bar bg-light text-right text-dark pr-3" style="width: 60%">40</div>
                </div>
            </div>
        </div>

    </div>
</section>
<!--工作环境-->
<section class="mt-4">
    <div class="container">
        <div class="row">
            <div class="col">
                <div>
                    <h4>工作环境 &nbsp
                        <small class="text-muted">兼顾学习 工作 生活的一体化环境</small>
                    </h4>
                </div>
            </div>
        </div>
        <!--pc端-->
        <div class="row  d-none d-lg-block">
            <div class="col">
                <div class="swiper-container-pc">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="images/t1.jpg" class="img-fluid"></div>
                        <div class="swiper-slide"><img src="images/t2.jpg" class="img-fluid"></div>
                        <div class="swiper-slide"><img src="images/t3.jpg" class="img-fluid"></div>
                        <div class="swiper-slide"><img src="images/t4.jpg" class="img-fluid"></div>
                        <div class="swiper-slide"><img src="images/t5.jpg" class="img-fluid"></div>
                        <div class="swiper-slide"><img src="images/t6.jpg" class="img-fluid"></div>
                    </div>
                    <!-- Add Pagination -->
                    <div class="swiper-pagination-pc"></div>
                </div>
            </div>
        </div>
        <!--移动端-->
        <div class="row  d-lg-none">
            <div class="col">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="images/t1.jpg" class="img-fluid"></div>
                        <div class="swiper-slide"><img src="images/t2.jpg" class="img-fluid"></div>
                        <div class="swiper-slide"><img src="images/t3.jpg" class="img-fluid"></div>
                        <div class="swiper-slide"><img src="images/t4.jpg" class="img-fluid"></div>
                        <div class="swiper-slide"><img src="images/t5.jpg" class="img-fluid"></div>
                        <div class="swiper-slide"><img src="images/t6.jpg" class="img-fluid"></div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--footer-->
<footer class="mt-4 bg-dark text-light small">
    <div class="container">
        <div class="row pt-3 pb-5">
            <div class="col-sm-12 col-lg-10">
                <div>
                    <p style="color: orangered" class="mb-2">L.F.C是一个专业系统小组。</p>
                    <ul class="nav">
                        <li class="nav-item "><a class="nav-link text-white ps-0 " href="###">关于我们</a></li>
                        <li class="nav-item"><a class="nav-link text-white  ps-0" href="###">关于我们</a></li>
                        <li class="nav-item"><a class="nav-link text-white  ps-0" href="###">关于我们</a></li>
                        <li class="nav-item"><a class="nav-link text-white  ps-0" href="###">关于我们</a></li>
                        <li class="nav-item"><a class="nav-link text-white  ps-0" href="###">关于我们</a></li>
                        <li class="nav-item"><a class="nav-link text-white  ps-0" href="###">关于我们</a></li>
                    </ul>
                    <div class="text-muted">
                        ©<i>2017</i>Automated. All Rights Reserved |<span class="mx-3"> Design by W3layouts</span>鄂A12312
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-lg-2 text-md-end text-center">
                <figure class="figure mt-3 text-center">
                    <img src="images/qrcode.png" class="figure-img img-thumbnail" style="max-width: 100px">
                    <figcaption>欢迎关注</figcaption>
                </figure>
            </div>

        </div>
    </div>
</footer>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!--手写dplayer播放器的实例化-->
<script>
    //页面加载完执行
    $(function () {
        var dp1;
        var dp2;
        var dp3;
        var dp4;

        dp1 = new DPlayer({
            element: document.getElementById('dplayer1'),                       // 可选，player元素
            video: {                                                           // 必需，视频信息
                url: '//cdn.eduwork.cn/mp4/three.mp4',
                pic: 'images/player/p1.png',                                       // 可选，视频截图
            },
        });
        dp2 = new DPlayer({
            element: document.getElementById('dplayer2'),                       // 可选，player元素
            video: {                                                           // 必需，视频信息
                url: '//cdn.eduwork.cn/mp4/three.mp4',
                pic: 'images/player/p2.png',                                       // 可选，视频截图
            },
        });
        dp3 = new DPlayer({
            element: document.getElementById('dplayer3'),                       // 可选，player元素
            video: {                                                           // 必需，视频信息
                url: '//cdn.eduwork.cn/mp4/three.mp4',
                pic: 'images/player/p3.png',                                       // 可选，视频截图
            },
        });
        dp4 = new DPlayer({
            element: document.getElementById('dplayer4'),                       // 可选，player元素
            video: {                                                           // 必需，视频信息
                url: '//cdn.eduwork.cn/mp4/three.mp4',
                pic: 'images/player/p4.png',                                       // 可选，视频截图
            },
        });
    })


</script>


<!--播放器切换效果js-->
<script type="text/javascript">
    (function (A) {
        A.fn.th_video_focus = function (E) {

            var G = {
                actClass: "cur",
                navContainerClass: ".focus_pic_preview",
                focusContainerClass: ".focus_pic",
                animTime: 600,
                delayTime: 5000
            };

            if (E) {
                A.extend(G, E)
            }

            var C = G.actClass, D = G.navContainerClass, B = G.focusContainerClass, F = G.animTime, H = G.delayTime,
                I = null;

            return this.each(function () {

                var O = A(this), M = A(D + " li", O), P = A(B + " li", O), L = M.length, K = O.height();

                function N(R) {
                    var V = K * R * -1;
                    var U = A(B + " li", O), W = null, T = null;
                    for (var S = 0; S <= R; S++) {
                        W = U.eq(S);
                        T = W.find('script[type="text/templ"]');
                        if (T.length > 0) {
                            W.html(T.html())
                        }
                    }
                    A(B, O).stop().animate({top: V}, F, function () {
                        var Y = O.find("h3"), X = Y.height();
                        Y.height(0).html(A(".film_focus_nav li").eq(R).find("img").attr("alt")).animate({height: X}, 600)

                    });
                    A(D + " li").eq(R).addClass(C).siblings().removeClass(C)

                    /* dp1.pause();
                     dp2.pause();
                     dp3.pause();
                     dp4.pause();*/


                }

                function Q() {
                    if (I) {
                        clearInterval(I)
                    }
                    I = setInterval(function () {
                        var R = A(D + " li." + C).index();
                        N((R + 1) % L)
                    }, H)
                }

                /*   dp1.on("play", function(){
                       if(I){
                           clearInterval(I)
                       }
                   });

                   dp2.on("play", function(){
                       if(I){
                           clearInterval(I)
                       }
                   });

                   dp3.on("play", function(){
                       if(I){
                           clearInterval(I)
                       }
                   });

                   dp3.on("play", function(){
                       if(I){
                           clearInterval(I)
                       }
                   });
   */


                O.hover(function () {
                    if (I) {
                        clearInterval(I)
                    }
                }, function () {
                    /*如果视频点击切换了应该暂停*/
                    if (dp1.video.paused && dp2.video.paused && dp3.video.paused && dp4.video.paused) {
                        Q()
                    }

                });

                var J = null;

                M.hover(function () {

                    var R = A(this).index();

                    if (I) {
                        clearInterval(I)
                    }
                    J = setTimeout(function () {
                        N(R)
                    }, 300)
                }, function () {
                    if (J) {
                        clearTimeout(J)
                    }
                    Q()
                }).click(function (T) {
                    var R = A(this).index(), S = P.eq(R).find("a");
                    if (document.uniqueID || window.opera) {
                        S[0].click();
                        T.stopPropagation();
                        T.preventDefault()
                    }
                });

                Q()

            })
        }

    })(jQuery);

    $(function () {

        //第二个焦点图
        $(".film_focus").th_video_focus({
            navContainerClass: ".film_focus_nav",
            focusContainerClass: ".film_focus_imgs",
            delayTime: 3000
        });

    });
</script>
<script>
    var swiper = new Swiper('.swiper-container');
    var swiper2 = new Swiper('.swiper-container-pc', {
        slidesPerView: 3,
        spaceBetween: 30,
        pagination: {
            el: '.swiper-pagination-pc',
            clickable: true,
        },
    });
    /*我的收获鼠标移入毛玻璃效果*/
    $("#shouhuo_row").find("a").mouseenter(function () {
        $(this).addClass("frosted__glass");
    }).mouseleave(function () {
        $(this).removeClass("frosted__glass");
    })
    $(function () {
        var timer = null;
        var i = 0;//指定播放图片的序号
        var pic_counts = $("#lunbo_pc a").length; //获取pc轮播图的张数
        //初始化第一个a标签颜色
        $("#r_list>a").eq(0).addClass("text-white").removeClass("text-white-50");

        //开始轮播方法
        function startRound() {
            $("#lunbo_pc>a").eq(i).fadeIn().siblings().fadeOut();
        }

        //鼠标放上轮播a标签特效
        $("#lunbo_pc").hover(function () {
            //鼠标放上去特效->停止定时器
            clearInterval(timer);
        }, function () {
            //鼠标离开特效->继续开始定时器
            roundPlayer();
        });
        //鼠标移入移出a标签效果
        $("#r_list>a").mouseenter(function () {
            $(this).addClass("text-danger ").removeClass("text-white-50");
            i = $(this).index();
            clearInterval(pic_counts);
            startRound();

        });
        $("#r_list>a").mouseleave(function () {
            $(this).addClass("text-white-50").removeClass("text-danger");
            roundPlayer();
        });

        //自动播放壁纸
        function roundPlayer() {
            //默认定时器是开着的，先清楚一下
            clearInterval(timer);


            //5秒定时器
            timer = setInterval(function () {
                i++;
                if (i == pic_counts) {
                    i = 0;
                }
                startRound();

                //让自动轮播到的图片的a标签也变成白色
                $("#r_list>a").eq(i).addClass("text-white").removeClass("text-white-50")
                //让其他的兄弟a标签恢复之前的样式
                    .siblings().addClass("text-white-50").removeClass("text-white");
            }, 5000);
        }

        roundPlayer();
    })
</script>
<!--你的总监模块的切换时的阴影效果-->
<script>
    $(function () {
        $(".teacher").hover(function () {
            $(this).children('.card').addClass('shadow-lg ');
            var data_id = $(this).attr("data-ti");
            switch (data_id) {
                case '1':
                    $("#teacher-c-pic").attr("src", "images/phpjs4c.png");
                    $("#teacher-c-title").attr("src", "黄芪发");

                    break;
                case '2':

                    $("#teacher-c-pic").attr("src", "images/eduzhaoshuai.png");
                    $("#teacher-c-title").attr("src", "何尚生");
                    break;
                case '3':

                    $("#teacher-c-pic").attr("src", "images/phpjs4c.png");
                    $("#teacher-c-title").attr("src", "刘建明");

                    break;
                case '4':

                    $("#teacher-c-pic").attr("src", "images/phpjs4c.png");
                    $("#teacher-c-title").attr("src", "陈永仁");

                    break;
            }
        }, function () {
            $(this).children('.card').removeClass('shadow-lg');

        })
    })
</script>
<!--对标模块特效js-->
<script>
    $(function () {
        $('#pk:not("#pk-title")').children('.row').hover(function () {
            $(this).css('background', '#AAA');
        }, function () {
            $(this).css('background', '#FFF');

        })
    })
</script>
</body>
</html>